<template>
  <view>
    <headBar :title="appTitle"></headBar>
    <view class="xmain">
      <view class="xbanner">
        <uni-swiper-dot class="uni-swiper-dot-box" @clickItem=clickItem :info="bannerList" :current="current"
                        :mode="mode"
                        :dots-styles="dotsStyles" field="content" width="8">
          <swiper class="swiper-box" @change="change" :current="swiperDotIndex">
            <swiper-item v-for="(item, index) in bannerList" :key="index">
              <view class="swiper-item" :class="'swiper-item' + index">
                <image :src="item.url" style="width:100%;"></image>
              </view>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
      <view class="uni-flex uni-row xNav">
        <view class="flex-item" style="width:50%;">
          <image src="~@/static/app_image/img_fenlei.png" style="width:100%;height:180rpx;" mode="aspectFit"></image>
        </view>
        <view class="flex-item" style="width:50%;">
          <image src="~@/static/app_image/img_jinxuan.png" style="width:100%;height:180rpx;" mode="aspectFit"></image>
        </view>
      </view>
      <view style="width:100%;overflow: auto;">
        <view class="uni-flex uni-row xCat">
          <view class="flex-item focus">
            最新
          </view>
          <view class="flex-item" v-for="item in categoryList">
            {{item.name}}
          </view>
        </view>
      </view>
      <view class="imgList">
        <view class="" style="margin-top: 30rpx;">
          <view class="" style="float:left;width:50%;text-align: center;" v-for="item in imgList">
            <image :src="item.mid_image" style="width:95%;"></image>
          </view>
        </view>
      </view>
      <xToastAgree v-if="DialogShow" :isShow="DialogShow">
        <view class="" style="background: #FFFFFF;border-radius: 10rpx;width:70%;margin: 0rpx auto;padding:60rpx;">
          <view style="text-align: center;font-weight: bold">温馨提示</view>
          <view style="margin-top: 20rpx;">
            欢迎使用本产品！本产品非常重视您的隐私和个人信息。在您使用本产品前，请认真阅读
            <text style="color:#3495fc;" @click="x_redirect('/pages/content/content?type=agreement')">《用户协议》</text>
            以及
            <text style="color:#3495fc;" @click="x_redirect('/pages/content/content?type=privacy')">《隐私政策》</text>
            , 您接受并同意条款后即可开始使用本产品
          </view>
          <view style="margin-top:20rpx;">
            <button type="primary" @click="agree()">同意并继续</button>
          </view>
          <view style="margin-top:20rpx;">
            <button style="background: #dedede;" @click="noAgree()">不同意仅浏览模式</button>
          </view>
        </view>
      </xToastAgree>
      <bootNav v-if="isAgree" nav="home"></bootNav>
    </view>
  </view>
</template>

<script>
export default {

  data() {
    return {
      DialogShow: false,
      isAgree: false,
      bannerList: [],
      current: 0,
      mode: 'dot',
      dotsStyles: {
        backgroundColor: 'rgba(83, 200, 249,0.3)',
        border: '1px rgba(83, 200, 249,0.3) solid',
        color: '#fff',
        selectedBackgroundColor: 'rgba(83, 200, 249,0.9)',
        selectedBorder: '1px rgba(83, 200, 249,0.9) solid'
      },
      swiperDotIndex: 0,
      categoryList:[],
      imgList:[]
    }
  },
  onShareAppMessage() {
    return {
      title: this.title,
    }
  },
  onShareTimeline: function () {
    return {
      title: this.title,
    }
  },
  onLoad(e) {
    var t = this;
    t.getBannerList();
    t.getAgree();
    t.xCategory();
    t.xImageList();
  },
  methods: {
    getAgree() {
      var t = this;
      var agree = t.xCacheGet('isAgreement');
      if (!agree) {
        t.DialogShow = true;
        t.isAgree = false;
      } else {
        t.isAgree = true;
      }
    },
    agree() {
      var t = this;
      t.xCacheSet('isAgreement', true);
      t.DialogShow = false;
      t.isAgree = true;
    },
    noAgree() {
      var t = this;
      t.xCacheSet('isAgreement', false);
      t.DialogShow = false;
      t.isAgree = false;
    },
    indexDirect(targetPage) {
      var t = this;
      var agree = t.xCacheGet('isAgreement');
      if (!agree) {
        t.DialogShow = true;
      } else {
        t.DialogShow = false;
        t.x_redirect(targetPage);
      }
    },
    change(e) {
      this.current = e.detail.current
    },
    clickItem(e) {
      this.swiperDotIndex = e
    },
    getBannerList() {
      var t = this;
      t.x_app_request('api/wallpaper.banner', {}, function (t, res) {
        if (res.code === 1) {
          t.bannerList = res.data;
          t.xbanner();
        }
      });
    },
    xbanner() {
      var t = this;
      var len = t.bannerList.length;
      setInterval(function () {
        if (t.current < len - 1) {
          t.current++;
          t.swiperDotIndex = t.current;
        } else {
          t.swiperDotIndex = t.current = 0;
        }
      }, 3000)
    },
    xCategory(){
      var t = this;
      t.x_request('api/wallpaper.category', {}, function (t, res) {
        if (res.code === 1) {
          t.categoryList = res.data;
        }
      });
    },
    xImageList(){
      var t = this;
      t.x_request('api/wallpaper.image', {}, function (t, res) {
        if (res.code === 1) {
          t.imgList = res.data.data;
        }
      });
    },
  }
}
</script>

<style>
@import "../index/index.css";

.swiper-box {
  height: 150px;
}

.swiper-item {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: 150px;
  color: #fff;
}

/* #ifndef APP-NVUE */
::v-deep .image img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}

/* #endif */

@media screen and (min-width: 500px) {
  .uni-swiper-dot-box {
    width: 400px;
    margin: 0 auto;
    margin-top: 8px;
  }

  .image {
    width: 100%;
  }
}


</style>
